<template>
  <div class="home">
    <el-container >
      <el-header class="top-box">
        <el-row :gutter="24">
          <el-col :span="18">
           <h2>房产管理系统</h2>
          </el-col>
          <el-col :span="6">
            <div class="info-box">
               <span>管理员</span>
              <el-button @click="back" class="out-btn" type="text">退出</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px" >
            <!-- 欢迎页--商品列表----属性管理---权限管理----个人中心-->
            <el-menu
              router="true"
              class="el-menu-vertical-demo"
            >
               <el-menu-item :route="i.path" v-for="i in tabList" :key="i.name" :index="i.name"> 
                <!-- <i class="el-icon-document"></i> -->
                 <template #title>{{i.meta.title}}</template> 
              </el-menu-item>
            </el-menu>
        </el-aside>
         <el-main>
          <router-view/>
        </el-main> 
       </el-container>
    </el-container> 
  </div>
</template>

<script>
// @ is an alias to /src
//import { reactive } from "vue";
import router from "../router/index";
export default {
  name: "Home",
  setup() {
    //console.log(router);
    let tabList = router.options.routes[3].children;
    return {
      tabList,
    };
  },
   back(){
      this.$router.push({ path:"/login"});
   }
};
</script>
<style lang="scss" scoped>
// .el-menu-vertical-demo{
//   background-color:gray;
// }
.logo {
  width: 50px;
}
.info-box {
  text-align: right;
}
.top-box {
  background: rgb(144, 143, 148);
  padding: 5px;
}
.out-btn {
  margin-left: 10px;
}
</style>